const path = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  mode: 'production', //production为压缩代码,development为不压缩代码,简称开发者模式
  devtool: 'cheap-module-source-map', //source-map会把映射关系用文件方式生成在打包后的dist里面,inline-source-map则会把映射关系用base64字放到打包后的js文件的底部
  entry: {
    home: './src/index.js',
    // about: './src/index.js', //可设置多个打包文件
  },
  devServer: {
    contentBase: './dist',
    open: true,
    proxy: {
      "/api": "http://localhost:3000"
    },
    port: 8080
  },
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'file-loader', 
        options: {
          //placeholder 点位符
          name: '[name]_[hash].[ext]',
          outputPath: 'images',
          limit: 10023, // 单位是k,图片小于限制就会打包成base 64位的字符,超出限制就会生成图片
        }
			}
		},{
			test: /\.(eot|ttf|svg|woff)$/,
			use: {
				loader: 'file-loader', 
			}
		},{
			test: /\.(css|scss)$/,
			use: [
        // 代码的执行顺序是从下到上,从右到左
        'style-loader', //3.最后把代码放到index的head头部
        {
          loader: 'css-loader', // 2.然后把sass翻译后的代码放到css这里
          options: {
            importLoaders: 2, //保证把后台代码执行
            // modules: true, // 开启css的模块化打包
          }
        },
        'sass-loader', // 1.先把sass里的代码进行翻译
        'postcss-loader' // css3语句支持厂商语句,配合postcss.config.js使用
      ],
		}]
	},
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'//在打包结束后,利用指定模板自动生成html文件
  }),
    new CleanWebpackPlugin()
  ], //在打包之前,把dist删除
  output: {
    // publicPath: 'http://cdn.com.cn', //打包后,js路径自动添加网址
    publicPath: '/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist') //__dirname表示当前路径/dist/
  }
}